<template>
    <!-- 兑换历史 -->
    <div class="exchangeHistory">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list class="exchangeHistory-list" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
               <div class="list-box" v-for="item in list" :key="item.id">
                <div class="px-30 font-28">
                    <div class="flex justify-between items-center h-60">
                        <p>兑换币种</p>
                        <p class="flex items-center">
                            <img :src="`${HOST_URL}/symbol/${'usdt'}.png`" class="w-42 h-42 mr-5">
                            <span>{{ item.exchange }}</span>
                        </p>
                    </div>
                    <div class="flex justify-between items-center h-60">
                        <p>到账币种</p>
                        <p class="flex items-center">
                            <img :src="`${HOST_URL}/symbol/${'usdc'}.png`" class="w-42 h-42 mr-5">
                            <span>{{ item.arrival }}</span>
                        </p>
                    </div>
                    <div class="flex justify-between items-center h-60">
                        <p>兑换数量</p>
                        <p>{{ item.exchangeNum }}</p>
                    </div>
                    <div class="flex justify-between items-center h-60">
                        <p>到账数量</p>
                        <p>{{ item.arrivalNum }}</p>
                    </div>
                    <div class="flex justify-between items-center h-60">
                        <p>日期</p>
                        <p>{{ item.time }}</p>
                    </div>
                </div>
               </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import { List, PullRefresh} from 'vant';
import { HOST_URL } from '@/config';
import defaultImage from '@/assets/loading-default.png';
export default {
    components: {
        [List.name]: List,
        [PullRefresh.name]: PullRefresh,
    },
    data() {
        return {
            loading: false,
            finished:true,
            refreshing:false,
            HOST_URL,
            defaultImage,
            list:[
                {
                    id:0,
                    exchange:'USDT',
                    arrival:'USDC',
                    exchangeNum:-100,
                    arrivalNum:100,
                    time:'2024/11/27 18:02:22',
                },
                {
                    id:1,
                    exchange:'USDT',
                    arrival:'USDC',
                    exchangeNum:-1000,
                    arrivalNum:1000,
                    time:'2024/12/27 18:02:22',
                },
            ],
        }
    },
    methods: {
         // 上拉加载
         onLoad() {
            console.log(11);
            
        },
        // 下拉刷新
        onRefresh() {
            console.log(22);
            this.refreshing = false;
        },
        handleImageError(event) {
            event.target.src = this.defaultImage;
        },
    },
}
</script>

<style lang="scss" scoped>
.exchangeHistory{
    .exchangeHistory-list{
        padding: 0 30px;
        .list-box{
            padding: 60px 0;
            border-bottom: 2px dotted #ccc;
        }
    }
}
</style>